<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="/qos/header" />

<body>
    <section class="content-header">
        <h1>数据任务管理</h1>
    </section>
    <section class="content">
        <div class="box box-widget">
            <div class="box-body">
                <form id="searchbar" class="form-horizontal form-search">
                    <div class="form-group">
                        <div class="col-md-2">
                            <input type="text" class="form-control" name="label" placeholder="请输入查询内容" />
                        </div>
                        <div class="col-md-2">
                            <select name="type" class="form-control">
                                <option value="">全部任务</option>
                                <option value="schedule">定时任务</option>
                                <option value="realtime">实时任务</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="level" class="form-control">
                                <option value="99">主要</option>
                                <option value="1">次要</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <div class="pull-right">
                                <button type="button" style="width:100px" class="btn btn-primary tonto-btn-search" onclick="table.refresh()"><i class="fa fa-search"></i>查询</button>
                            </div>
                        </div>
                    </div>
                    <!-- 表单仅有一个text-input时回车会提交表单，这里添加一个无用的防止回车提交 -->
                    <input type="text" style="display:none">
                </form>
            </div>
        </div>
        <div class="box box-widget">
            <div id="result" class="box-body">
                <table id="dataGrid"></table>
                <div id="toolbar">
                </div>
            </div>
        </div>
    </section>
    <div th:include="/qos/footer" />
    <script type="text/javascript">
    var table;
    $(function() {
        initDataGrid();
    });

    function initDataGrid() {
        table = $.createTable("#dataGrid", {
            idField: "id",
            columns: [
                [
                    { title: "ID", field: "id" },
                    {
                        title: "是否实时",
                        field: "realTimeEnabled",
                        formatter: function(value, row, index) {
                            return (value == 1) ? "是" : "否";
                        }
                    },
                    {
                        title: "实时间隔",
                        field: "realTimeInterval",
                        formatter: function(value, row, index) {
                            return row.realTimeEnabled == 1 ? value + "分钟" : '-';
                        }
                    },
                    { title: "上次执行时间", field: "realTimeMillisecond", formatter: "datetime" },
                    {
                        title: "归档策略",
                        field: "filingStrategy",
                        formatter: function(value, row, index) {
                            return '策略' + value;
                        }
                    },
                    {
                        title: "调用策略",
                        field: "scheduleStrategy",
                        formatter: function(value, row, index) {
                            return '策略' + value;
                        }
                    },
                    {
                        title: "执行情况",
                        field: "executeSituation"
                    },
                    {
                        title: "状态",
                        field: "isRun",
                        formatter: function(value, row, index) {
                            if (row.enabled == 1) {
                                return value ? '<span class="label label-success">运行中</span>' :
                                    '<span class="label label-info">闲置中</span>';
                            }
                            return '<span class="label label-danger">不可用</span>'
                        }
                    },
                    {
                        title: "操作",
                        align: "center",
                        width: "200px",
                        events: {
                            'click .execute': function(e, value, row, index) {
                                execute(row);
                            }
                        },
                        formatter: function operateFormatter(value, row, index) {
                            return '<button class="execute btn btn-xs btn-success" style="width:120px"><i class="glyphicon glyphicon-success"></i>执行</button>';
                        }
                    }
                ]
            ],
            url: '/qos/data/task/list',
            pagination: false,
            searchbar: '#searchbar',
            toolbar: "#toolbar"
        });

        setInterval(function() {
            table.refresh();
        }, 120000);
    }

    var executeHtml = '<div style="padding:30px;padding-top:20px">' +
        '<form id="execute_form" action="" method="post" class="form-horizontal" novalidate="novalidate">' +
        '    <div class="form-group">' +
        '        <label for="hour" class="col-sm-3 control-label">执行多久：</label>' +
        '        <div class="col-sm-8">' +
        '            <input id="hour" name="hour" type="number" class="form-control">' +
        '        </div>' +
        '    </div>' +
        '    <div class="form-group">' +
        '        <div class="col-sm-4 col-sm-offset-3">' +
        '            <button type="button" id="_executeSubmitBtn" class="btn btn-primary btn-block">执行</button>' +
        '        </div>' +
        '    </div>' +
        '</form></div>';


    function execute(row) {
        if (row) {
            $.openPageLayer(executeHtml, {
                title: "执行任务",
                width: 450,
                height: 200,
                success: function(layero, layeroIndex) {
                    $("#_executeSubmitBtn").click(function() {
                        var hour = $("#hour").val();
                        if (hour && hour > 0) {
                            $.getAjax('/qos/data/task/execute?hour=' + hour + '&id=' + row.id, function() {
                                $.successMessage("执行成功");
                                layer.close(layeroIndex);
                            });
                        } else {
                            $.errorMessage("请输入正确时间");
                        }
                    });
                }
            });
        }
    }
    </script>
</body>

</html>